<template>
    <el-row class="left">
        <!-- 一个对象 -->
        <el-form :model="{users}" ref="userForm">
            <el-row class="row">
                <el-row class="header">乘机人</el-row>
                <el-row>
                    <el-row v-for="(item,index) in users" :key="index">
                        <div class="member">
                            <span class="delete-user" @click="delUser(index)">-</span>
                            <el-form-item label="乘机人" :prop="`users[${index}].username`"
                            :rules="[
                            {
                                required:true,
                                message:'输入乘机人姓名',
                                trigger:'blur'
                            }
                            ]">
                            <el-input v-model="item.username" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="证件类型" :prop="`users[${index}].id`"
                            :rules="[
                            {
                                required:true,
                                message:'输入证件号码',
                                trigger:'blur'
                            },
                            {
                                pattern:/^\d{18}$/,
                                message:'身份证不合法',
                                 trigger:'blur'
                            }
                            ]">
                                <el-input v-model="item.id" placeholder="证件号码" class="input-with-select">
                                    <el-select v-model="select" slot="prepend">
                                        <el-option label="身份证" value="1" selected></el-option>
                                        <!-- <el-option label="护照" value="护照"></el-option> -->
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-row> 
                    <el-form-item class="btn-item">
                        <el-button type="primary" @click="addUser">添加乘机人</el-button>
                    </el-form-item>
                </el-row>
            </el-row>
        </el-form>
            <el-row class="row insurance">
                <el-row class="header">保险</el-row>
                <el-checkbox-group v-model="insurances">
                    <el-row v-for="(item,index) in orderData.insurances" :key="index">
                        <!-- 对于 checkbox 来说, label 是最终存放在数组中供接口使用的数据
                        如果我们希望显示不一样的内容给用户, 就放在开闭标签之间 -->
                        <el-checkbox :label="item.id" border>
                            {{item.type}}：￥{{item.price}}/份×1  最高赔付{{item.compensation}}
                        </el-checkbox>
                    </el-row>
                </el-checkbox-group>
            </el-row>
        <el-form ref="contactForm" :model="{
            contactName,contactPhone,verifyCode
        }">    
            <el-row class="row contacts">
                <el-row class="header">联系人</el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="姓名" prop="contactName" 
                        :rules="[
                        {
                            required:true,
                            message:'输入联系人姓名',
                            trigger:'blur'
                        }
                        ]">
                            <el-input v-model="contactName"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="contactPhone" :rules="[
                        {
                            required:true,
                            message:'输入联系人手机号',
                            trigger:'blur'
                        },
                        {
                            pattern:/^\d{11}$/,
                            message:'手机号不合法',
                            trigger:'blur'
                        }
                        ]">
                            <el-input v-model="contactPhone">
                                <template slot="append">
                                    <!-- template依赖标签 这里添加一个标签 -->
                                    <span @click="getCaptcha" style="cursor:pointer;">发送验证码</span>
                                    </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="verifyCode" :rules="[
                        {
                            required:true,
                            message:'输入验证码',
                            trigger:'blur'
                        }
                        ]">
                            <el-input v-model="verifyCode"></el-input>
                        </el-form-item>
                        <el-form-item class="last">
                            <el-button class="submit-btn" @click="submitOrder">提交订单</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
        <div style="display:none">{{totalPrice}}</div>
    </el-row>
</template>

<script>
export default {
    props:{
        orderData:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            select:'身份证',
            users:[
                {username:'',id:''}
            ],
            insurances:[],
            contactName:'',
            contactPhone:'',
            verifyCode:'',
            invoice:false
        }
    },
    computed:{
        totalPrice(){
            let total = 0;
            total = this.orderData.seat_infos.org_settle_price * this.users.length;

            this.orderData.insurances.forEach(item => {
                if(this.insurances.includes(item.id)){
                    total += item.price * this.users.length;
                }
            });

            let personNum = this.users.length;

            this.$emit('loadPassengerData',total,personNum);
            return total;
        }
    },
    methods:{
        addUser(){
            this.users.push({username:'',id:''});
        },
        delUser(index){
            this.users.splice(index,1);
        },
        getCaptcha(){
            if(!this.contactPhone){
                this.$message.warning('请输入手机号');
                return;
            }
            this.$axios({
                url:'/captchas',
                method:'post',
                data:{
                    'tel':this.contactPhone
                }
            }).then(res => {
                this.$alert(`验证码：${res.data.code}`,  {
                    confirmButtonText: '确定'
                });
            })
        },
        // 提交订单
        async submitOrder(){
            let isValidUserForm = await this.$refs.userForm.validate().catch(e=>{});
            let isValidContactForm = await this.$refs.contactForm.validate().catch(e=>{});
            if(isValidUserForm && isValidContactForm){
                let data = {
                    users:this.users,
                    insurances:this.insurances,
                    contactName:this.contactName,
                    contactPhone:this.contactPhone,
                    invoice:this.invoice,
                    air:Number(this.$route.query.id),
                    seat_xid:this.$route.query.seat_xid,
                    captcha:this.verifyCode
                }
                this.$axios({
                    url:'/airorders',
                    method:'post',
                    data:data,
                    headers:{
                        'Authorization':'Bearer ' + this.$store.state.user.userInfo.token
                    }
                }).then(res => {
                    if(res.data.message == '订单提交成功'){
                        this.$message.success(res.data.message);
                        setTimeout(() => {
                            this.$router.push('/ticket/pay?id='+res.data.data.id)
                        },800);
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.left{
    width: 594px;
}
.row{
    .header{
        padding:5px 0 35px;
        font-size: 22px;
        color: #000;
    }
    .el-row{
        &:first-child{
            .delete-user{
                &:first-child{
                    display: none;
                }
            }
        }
    }
}
.contacts{
    border-bottom:1px dashed #eee;
    /deep/.el-form-item__label{
        width:80px;
        padding-right: 14px;
        display:inline-block;
    }
    /deep/.el-form-item__content{
        width:256px;
        display:inline-block;
    }

}
.insurance{
    margin-top:20px;
    padding:20px 0;
    border-top:1px dashed #eee;
    border-bottom:1px dashed #eee;
}
.member{
    position: relative;
    padding-bottom: 20px;
    border-bottom:1px dashed #eee;
}
.delete-user{
    position: absolute;
    top: 86px;
    right: -25px;
    width:18px;
    height:18px;
    text-align: center;
    line-height: 18px;
    background-color: #DDDDDD;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
.el-checkbox-group .el-row{
    &:first-child{
        margin-bottom: 20px;
    }
}
// .el-form-item{
//     margin-bottom: 5px;
// }
/deep/.el-select .el-input {
    width: 130px;
}
/deep/.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
/deep/.el-form-item__label {
    line-height: 35px;
    padding: 0;
}
.btn-item{
    margin-top: 35px;
}
.submit-btn{
    width:250px;
    height: 50px;
    margin:20px 0 48px;
    background-color: #F59F34;
    color: #fff;
    outline: none;
    border: none;
}
.last{
    text-align: right;
}
</style>